<#assign dialogId = nowTimestamp.getTime()/>
<script>
    function updateMenuImage (iframe) {
        contentId = $(iframe).contents().find("span").html();
        $("#menu-image-preview").attr("src", "<@ofbizUrl>ViewSimpleContent</@ofbizUrl>?contentId=" + contentId);
        document.createNewMenu.contentId.value = contentId;
    }
</script>

<div class="menu">
    <div class="menu-img">
        <a href="javascript: void(0);" id="add-menu-button">
        <i class="fa fa-plus"></i></a>
    </div>
</div>
<div id="${dialogId}" title="${uiLabelMap.RestaurantCreateNewMenu}">
  <p id="errorMessage${dialogId}" class="error-message"></p>
  <form name="createNewMenu" action="<@ofbizUrl>createNewMenu</@ofbizUrl>" method="post">
    <input name="productCategoryId" type="hidden" value="${parameters.productCategoryId?if_exists}"/>
    <input name="contentId" type="hidden" value=""/>
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td colspan="2" class="add-menu-image-box">
                <img src="" id="menu-image-preview"/>
                <br/>
                <a href="javascript: void(0);" id="upload-menu-image">
                    <i class="fa fa-camera"></i>
                </a>
            </td>
          </tr>
          <tr>
            <td class="label">${uiLabelMap.RestaurantMenuName}</td>
            <td><input type="text" name="menuName" id="name" value="" class="text ui-widget-content ui-corner-all"></td>
          </tr>
          <tr>
            <td class="label">${uiLabelMap.RestaurantPrice}</td>
            <td><input type="text" name="price" id="price" value="" class="text ui-widget-content ui-corner-all" size="4"><#-- TODO: put currency--></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<div style="display: none">
    <form name="uploadMenuImage" action="<@ofbizUrl>uploadImage</@ofbizUrl>" method="post" target="add-menu-iframe" enctype="multipart/form-data">
        <input type="file" name="uploadedFile" id="uploadMenuImage" value="" class=""/>
    </form>
    <iframe name="add-menu-iframe" id="add-menu-iframe" onLoad="updateMenuImage(this)"></iframe>
</div>
<script>
    function createNewMenu () {
        submitDialogForm("${dialogId}", document.createNewMenu)
        return false;
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 500,
      width: 500,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantSave)}": createNewMenu,
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
        }
      },
      close: function() {
        document.createNewMenu.reset();
      }
    });
    
    $("#add-menu-button").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
    $("#upload-menu-image").click(function () {
        $("#uploadMenuImage").trigger("click");
    });
    $("#uploadMenuImage").change(function () {
        document.uploadMenuImage.submit();
    });
</script>
